<template>
	<view class="contentPage">

		<video id="myVideo" :src="videoUrl" :direction="90" autoplay :show-fullscreen-btn="true" enable-danmu
			:danmu-btn="false" :enable-progress-gesture="true" controls @fullscreenchange="Clickfullscreenchange">
		</video>
		<view class="video-control-back" v-if="!isFullScree" @click="backup">
			<image src="../../static/img/back.png" mode="widthFix">
		</view>
		<div class="shuiyin">
			<div v-for="(items,indexs) in 15" :key="indexs" :class="indexs % 2 != 0 ? 'shuiyinL' : ''"
				:style="{'padding-left':indexs % 2 != 0 ? (shuiyinWidth* 2 + 120) / 2 + 'rpx' : ''}">
				<div v-for="(item,index) in 30" :key="index" class="shuiyintext">
					<p>{{userInfo.franchisessName}}</p>
					<p>{{mineInfo.user_name}}</p>
				</div>
			</div>
		</div>

	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				videoUrl: "",
				isFullScree: false, //是否全屏
				// isMenu: true,
				shuiyinWidth: 0,
				mineInfo: {},
			};
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad(e) {
			this.videoUrl = e.video;
			this.mine();
			var that = this;
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.shuiyintext')
				.boundingClientRect(data => {
					console.log(data)
					that.shuiyinWidth = data.width;
				})
				.exec();

		},
		onBackPress: function(event) {
			this.isFullScree = false;
		},
		methods: {
			// 获取基本数据
			async mine() {
				try {
					const res = await this.$api.getmine();
					this.mineInfo = res.data;
				} catch (e) {
					console.log(e)
				}
			},
			clk() { //video点击事件
				let that = this;
				that.isMenu = !that.isMenu;
			},
			Clickfullscreenchange: function(e) {
				this.isFullScree = !this.isFullScree;
			},
			backup() {
				uni.navigateBack()
			},
		},
		onReady() {
			// 获取 video 上下文 videoContext 对象
			this.videoContext = uni.createVideoContext('myVideo', this);
			// 进入全屏状态
			this.videoContext.requestFullScreen();
		},
	}
</script>

<style lang="scss">
	.contentPage {
		height: 100vh;
		overflow: hidden;
	}

	#myVideo {
		width: 100%;
		height: 100%;
	}

	.video-control-back {
		position: fixed;
		left: 30rpx;
		top: 54rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99999999999;
	}

	.video-control-back image {
		width: 40rpx;
		height: 40rpx;
	}

	.shuiyin {
		width: 200vw;
		height: 200vh;
		overflow: hidden;
		pointer-events: none;
		opacity: 0.2;
		position: fixed;
		left: -50vw;
		top: -50vh;
		z-index: 9999999999;
		transform: rotate(-30deg);

		>div {
			width: 1000%;
			overflow: hidden;

			>div {
				// width: 226rpx;
				height: 80rpx;
				margin-bottom: 100rpx;
				margin-right: 120rpx;
				float: left;

				p {
					font-size: 28rpx;
					color: #ffffff;
					line-height: 40rpx;
					font-family: "思源宋体 CN";
					text-align: center;
				}
			}
		}

		// >.shuiyinL {
		// padding-left: 173rpx;
		// }
	}
</style>
